<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .all{
            display: flex;
            justify-content: space-around;
            margin-top: 100px;
        }
 /*动画一开始*/
        .box{
            width: 110px;
            position: relative;
        }
        body{
            background: #373737;
        }
        .box div{
            width: 100px;
            height: 50px;
            background: white;
        }
        .one{
            border-top-left-radius:100px ;
            border-top-right-radius:100px;
            animation:ball-1 .4s infinite alternate-reverse;
            transform-origin: bottom center;
        }
        .two{
            border-bottom-left-radius:100px ;
            border-bottom-right-radius:100px;
            animation:ball-2 .4s infinite alternate-reverse;
            transform-origin: top center;
        }
        .box:after{
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            position: absolute;
            left: 110px;
            top: 40px;
            animation:ball-3 .8s infinite;
        }
        @keyframes ball-1 {
            from{

            }
            to{
                transform: rotate(-20deg);
            }
        }
        @keyframes ball-2 {
            from{

            }
            to{
                transform: rotate(20deg);
            }
        }
        @keyframes ball-3 {
            from{
                opacity: 1;
            }
            to{
                opacity: 0;
                transform: translateX(-90px);
            }
        }
    /*动画一结束*/




    /*动画二*/
        .box-2{
            display: flex;
        }
        .box-2 div{
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 50%;
        }
        .three{
            animation: ball-4 .4s infinite alternate-reverse ;
        }
        .four{
            animation: ball-4 .4s infinite alternate-reverse;
            animation-delay: .1s;
        }
        .five{
            animation: ball-4 .4s infinite alternate-reverse;
            animation-delay: .2s;
        }
        @keyframes ball-4 {
            from{

            }
            to{
                transform: scale(.4);
            }
        }
    /*    动画二结束*/



        .box-3{
            display: flex;
        }
        .box-3 div{
            width: 10px;
            height: 100px;
            background: white;
            margin-left: 8px;
            border-radius: 20px;

        }
        .box-3 div:nth-of-type(1){
            animation: ball-5 .4s infinite alternate-reverse;
        }
        .box-3 div:nth-of-type(2){
            animation: ball-5 .4s infinite alternate-reverse;
            animation-delay: .1s;
        }
        .box-3 div:nth-of-type(3){
            animation: ball-5 .4s infinite alternate-reverse;
            animation-delay: .2s;
        }
        .box-3 div:nth-of-type(4){
            animation: ball-5 .4s infinite alternate-reverse;
            animation-delay: .3s;
        }
        .box-3 div:nth-of-type(5){
            animation: ball-5 .4s infinite alternate-reverse;
            animation-delay: .4s;
        }
        @keyframes ball-5 {
            from{

            }
            to{
                transform: scaleY(.3);
            }
        }
    /*    动画三结束*/
    </style>
</head>
<body>
<div class="all">
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>

    <div class="box-2">
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
    </div>


    <div class="box-3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>


</body>
</html>